<template>
  <TopBar></TopBar>
  <div class="container">
    <div class="container-left">
      <div class="dynamic">
        <h3>动态</h3>
        <div><span>发动态</span><span>发布视频</span></div>
      </div>
      <p class="newSong">近三个月无新歌发布</p>
      <ul class="followUsers">
        <li v-for="item in wechatMoments">
          <div class="headPortrait">
            <img v-lazy="item.user.avatarUrl" alt="头像" />
          </div>
          <div class="dynamicInformation">
            <div class="Information-top">
              <div>
                <a href="javaScirpt:;">{{ item.user.nickname }}</a>
                <img v-lazy="item.user.avatarDetail.identityIconUrl" alt="" />
                <span>分享单曲</span>
              </div>
              <p>08:00</p>
            </div>
            <div class="Comments">
              <a href="javaScript:;"></a>{{ item.json.msg }}
            </div>
            <div class="ShareSongs">
              <img v-lazy="item.json.song?.album.picUrl" alt="专辑图片" />
              <div>
                <p>{{ item.json.song?.album.name }}</p>
                <span v-for="artist in item.json.song?.artists">{{
                  artist.name
                }}</span>
              </div>
            </div>
            <ul class="publish-img">
              <li v-for="pic in item.pics">
                <img v-lazy="pic.originUrl" alt="发表图片" />
              </li>
            </ul>
            <div class="doper-Ribbon">
              <a href="javaScript:;">(644)</a>
              <i>|</i>
              <a href="javaScript:;">转发 (7)</a>
              <i>|</i>
              <a href="javaScript:;">评论 (44)</a>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="container-right">
      <div class="myInformation">
        <div class="myInformation-top">
          <a href="javaScript:;">
            <img v-lazy="Usetinfo.avatarUrl" alt=" 头像" />
          </a>
          <div>
            <h5>
              <a href="javaScript:;">{{ Usetinfo.nickname }}</a>
            </h5>
            <p>123</p>
          </div>
        </div>
        <ul>
          <li>
            <a href="javaScript:;">
              <em>{{ UserDynamics.length }}</em>
              <i>动态</i>
            </a>
          </li>
          <li>
            <a href="javaScript:;">
              <em>{{ UserAttention.length }}</em>
              <i>关注</i>
            </a>
          </li>
          <li>
            <a href="javaScript:;">
              <em>{{ fansSize }}</em>
              <i>粉丝</i>
            </a>
          </li>
        </ul>
      </div>
      <div class="tj-attention">
        <div class="tj-assort">
          <h4>明星用户</h4>
          <a href="javaScript:;">换一批</a>
        </div>
        <ul class="tj-hotUp">
          <li>
            <img
              class="hotUp-head"
              src="http://p1.music.126.net/3h-xl97W159KQTNecM28Rw==/109951166888533919.jpg?param=45y45"
              alt="头像"
            />
            <div>
              <a href="javaScript">
                <span
                  >沙宝亮
                  <img
                    width="15px"
                    height="15px
                "
                    src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png"
                    alt="大V"
                  />
                  <p>歌手，代表作有《fasfsfasfassf</p>
                </span>
              </a>
            </div>
            <a href="javaScript:;" class="followUp">关注</a>
          </li>
          <li>
            <img
              class="hotUp-head"
              src="http://p1.music.126.net/3h-xl97W159KQTNecM28Rw==/109951166888533919.jpg?param=45y45"
              alt="头像"
            />
            <div>
              <a href="javaScript">
                <span
                  >沙宝亮
                  <img
                    width="15px"
                    height="15px
                "
                    src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png"
                    alt="大V"
                  />
                  <p>歌手，代表作有《fasfsfasfassf</p>
                </span>
              </a>
            </div>
            <a href="javaScript:;" class="followUp">关注</a>
          </li>
          <li>
            <img
              class="hotUp-head"
              src="http://p1.music.126.net/3h-xl97W159KQTNecM28Rw==/109951166888533919.jpg?param=45y45"
              alt="头像"
            />
            <div>
              <a href="javaScript">
                <span
                  >沙宝亮
                  <img
                    width="15px"
                    height="15px
                "
                    src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png"
                    alt="大V"
                  />
                  <p>歌手，代表作有《fasfsfasfassf</p>
                </span>
              </a>
            </div>
            <a href="javaScript:;" class="followUp">关注</a>
          </li>
        </ul>
        <div class="Sina-xixi">
          <p class="add-Sina">添加微博好友，和他们分享音乐</p>
          <a href="javaScript:;" class="bangd-Sina">绑定新浪微博</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "myAttention",
};
</script>

<script lang="ts" setup>
import TopBar from "@/layout/components/TopBar/index.vue";
import { onMounted, ref, reactive } from "vue";
import {
  getWechatMomentsApi,
  getUsetinfoApi,
  getNumberOfFansApi,
  getUserAttentionApi,
  getUserDynamicsApi,
} from "@/api/myAttention/myAttention";

const wechatMoments = ref<any>([]);

const Usetinfo = reactive<any>({
  avatarUrl: "",
  nickname: "",
});

// 登录账号的id
const userId = ref(0);

const fansSize = ref(0);

const UserAttention = ref<any>([]);

const UserDynamics = ref<any>([]);

onMounted(() => {
  getWechatMoments(16);
  getUsetinfo();
});

// 获取用户信息的接口
const getUsetinfo = async () => {
  const res = await getUsetinfoApi();
  console.log(res);
  Usetinfo.avatarUrl = res.profile.avatarUrl;
  Usetinfo.nickname = res.profile.nickname;
  userId.value = res.profile.userId;
  getNumberOfFans(userId.value);
  getUserAttention(userId.value);
  getUserDynamics(userId.value, 1, 1558011138743);
};

// 粉丝列表请求
const getNumberOfFans = async (uid: Number) => {
  const user = await getNumberOfFansApi(uid);
  fansSize.value = user.size;
};

// 获取关注列表
const getUserAttention = async (uid: Number) => {
  const res = await getUserAttentionApi(uid);
  UserAttention.value = res.follow;
};

// 获取用户动态列表
const getUserDynamics = async (
  uid: number,
  limit: number,
  lasttime: number
) => {
  const res = await getUserDynamicsApi(uid, limit, lasttime);
  UserDynamics.value = res.events;
};

//封装朋友圈展示数据请求
const getWechatMoments = async (pagesize: number) => {
  const res = await getWechatMomentsApi(pagesize);
  wechatMoments.value = res.event.map((item: any) => {
    return {
      id: item.id,
      actId: item.actId,
      json: JSON.parse(item.json),
      user: {
        avatarUrl: item.user.avatarUrl,
        nickname: item.user.nickname,
        userId: item.user.userId,
        userType: item.user.userType,
        avatarDetail: {
          identityIconUrl: item.user.avatarDetail.identityIconUrl,
        },
      },
      pics: item.pics.map((item2: any) => {
        return {
          format: item2.format,
          originUrl: item2.originUrl,
          height: item2.height,
          width: item2.width,
        };
      }),
    };
  });
  console.log(wechatMoments.value);
};
</script>

<style scoped>
.container {
  display: flex;
  margin: 0 auto;
  width: 982px;
}
.container-left {
  width: 680px;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 30px;
  border-left: 1px solid #1e1e1e;
  border-right: 1px solid #1e1e1e;
  padding-bottom: 50px;
}

.dynamic {
  display: flex;
  justify-content: space-between;
  height: 45px;
  border-bottom: 2px solid #c20c0c;
}
.dynamic h3 {
  font-size: 24px;
  font-weight: normal;
}
.dynamic div {
  font-size: 13px;
  font-weight: 700;
  height: 100%;
}

.dynamic div span {
  display: inline-block;
  padding: 2px 5px;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  margin-right: 10px;
}

.newSong {
  margin: 16px 0;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  font-size: 12px;
  color: #ccc;
}

.followUsers li {
  display: flex;
  padding: 20px 0;
}

.headPortrait img {
  width: 45px;
  height: 45px;
  margin-right: 10px;
}

.dynamicInformation {
  flex: 1;
  /* background-color: red; */
}
.Information-top {
  font-size: 14px;
}

.Information-top img {
  width: 15px;
  height: 15px;
  margin: 0 4px;
}
.Information-top p {
  margin-top: 8px;
  font-size: 12px;
}

.Comments {
  margin-top: 10px;
  line-height: 24px;
  font-size: 14px;
  word-break: break-word;
}

.Comments a {
  color: #0c73c2;
}

.ShareSongs {
  font-size: 14px;
  display: flex;
  height: 60px;
  background-color: #f5f5f5;
  padding: 14px 10px;
}
.ShareSongs img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.publish-img {
  /* width: 618px; */
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.publish-img li {
  width: calc(100% / 3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.publish-img img {
  width: 100%;
}
.doper-Ribbon {
  display: flex;
  justify-content: flex-end;
  color: #0c73ce;
  font-size: 12px;
  margin-top: 20px;
}
.doper-Ribbon i {
  display: inline-block;
  margin: 0 10px;
}
.container-right {
  flex: 1;
  border-right: 1px solid #1e1e1e;
}

.myInformation {
  padding: 48px 0 0 38px;
  height: 198px;
  background-color: #f4f4f4;
  border-bottom: 2px solid #d5d5d5;
}
.myInformation .myInformation-top > a {
  display: inline-block;
  padding: 2px;
  border: 1px solid #dadada;
  margin-right: 15px;
  background-color: #ffffff;
}
.myInformation-top {
  display: flex;
}
.myInformation img {
  width: 60px;
  height: 60px;
}
.myInformation ul {
  margin-top: 20px;
  display: flex;
}
.myInformation ul li {
  width: 47px;
  border-right: 1px solid #c2c2c2;
  margin-right: 20px;
}
.myInformation ul em {
  display: block;
  font-weight: 700;
  color: #6b7173;
  font-size: 20px;
}
.myInformation ul i {
  font-size: 12px;
  font-weight: 700;
  color: #6b7173;
}

.tj-attention {
  padding: 20px 30px;
}
.tj-assort {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #dcdcdc;
}

.tj-hotUp {
  /* height: 65px; */
  padding: 10px 0;
}
.tj-hotUp li {
  padding: 10px 0;
  display: flex;
}
.tj-hotUp .hotUp-head {
  width: 45px;
  height: 45px;
  margin-right: 5px;
}

.tj-hotUp p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tj-hotUp div {
  width: 116px;
  font-size: 12px;
  margin-right: 10px;
}
.tj-hotUp .followUp {
  margin-top: 17px;
  display: inline-block;
  width: 50px;
  height: 20px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  border: 1px solid #c4c4c4;
  border-radius: 5px;
}
.add-Sina {
  font-size: 12px;
}
.bangd-Sina {
  width: 235px;
  display: inline-block;
  height: 30px;
  border: 1px solid #dedddd;
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
  line-height: 32px;
  color: #333;
  margin-top: 10px;
}

.Sina-xixi {
  margin: 20px 0;
}
</style>
